<my-gotop></my-gotop>
<div class="header">
  <div>
    <a href="https://www.primefaces.org/primeng">
      <img class="logo-image" src="./assets/image/CMS_logo.jpg" alt="" width="80" height="50">
    </a>
  </div>
  <div style="margin-right: 40px">
    <ul>
      <li class="header-li">
        <a class="header-item" href="https://github.com/hbb520/angular4-primeng-admin" target="_blank">
          <i class="fa fa-github"></i>

        </a>
      </li>
      <li class="header-li">
        <a class="header-item">
          <i class="fa fa-commenting"></i>

        </a>
      </li>
      <li class="header-li">
        <a class="header-item" (click)="loginOut()">
          <i class="fa fa-sign-out"></i>
        </a>
      </li>
    </ul>
  </div>

</div>

<div class="menu" [@menuState]="state">
  <span class="text-error">{{menumsg}}</span>
  <span class="fa fa-bars bars" (click)="changeMenuWidth()"></span>
  <p-accordion>
    <p-accordionTab *ngFor="let item of menus ;let i=index;" [selected]="i == 0">
      <p-header>
        <i class="item-url fa" [ngClass]="item.icon" [@imgState]="state"></i>
        <span>{{item.name}}</span>
      </p-header>
      <ul>
        <div *ngIf="!pTooltipIf">
          <li *ngFor="let children of item.children"><a routerLink="{{children.link}}" routerLinkActive='active-link'>{{children.name}}</a>
          </li>
        </div>
        <div *ngIf="pTooltipIf">
          <li *ngFor="let children of item.children"><a routerLink="{{children.link}}" routerLinkActive='active-link'
                                                        pTooltip="{{children.name}}"></a>
          </li>
        </div>
      </ul>
    </p-accordionTab>
  </p-accordion>
</div>


<div class="router" [@routerState]="state">
  <router-outlet></router-outlet>
</div>
